<template>
  <div class="data-reports-container">
    <!-- 简单的首页欢迎内容 -->
    <div class="welcome-container">
      <div class="welcome-header">
        <h1 class="welcome-title">欢迎使用管理系统</h1>
        <p class="welcome-subtitle">欢迎来到管理平台，这里是您的首页</p>
      </div>

      <div class="welcome-content">
        <div class="welcome-card">
          <div class="card-icon">
            <i class="el-icon-s-home" style="font-size: 3rem; color: #409EFF;"></i>
          </div>
          <h3>系统首页</h3>
          <p>这里是系统的主页面，您可以在这里查看系统概览和快速访问各种功能。</p>
        </div>

        <div class="welcome-card">
          <div class="card-icon">
            <i class="el-icon-s-operation" style="font-size: 3rem; color: #67C23A;"></i>
          </div>
          <h3>功能导航</h3>
          <p>通过左侧菜单栏可以快速访问系统的各项功能模块。</p>
        </div>

        <div class="welcome-card">
          <div class="card-icon">
            <i class="el-icon-s-data" style="font-size: 3rem; color: #E6A23C;"></i>
          </div>
          <h3>数据管理</h3>
          <p>系统提供完善的数据管理功能，帮助您高效处理各种业务数据。</p>
        </div>
      </div>
    </div>

    <!-- 注释掉的原始复杂报表内容 -->
    <!--
    <div class="card">
      <div class="card-body">
        <div class="filter-container">
          <div class="filter-item">
            <span class="filter-label">报表类型:</span>
            <el-select v-model="filterForm.reportType" placeholder="请选择" style="width: 180px;">
              <el-option
                v-for="item in filterOptions.reportTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="filter-item">
            <span class="filter-label">时间范围:</span>
            <el-select v-model="filterForm.timeRange" placeholder="请选择" style="width: 120px;" @change="handleTimeRangeChange">
              <el-option
                v-for="item in filterOptions.timeRanges"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="filter-item" v-if="showCustomDateRange">
            <el-date-picker
              v-model="filterForm.startDate"
              type="date"
              placeholder="开始日期"
              style="width: 140px;">
            </el-date-picker>
            <span style="margin: 0 8px;">至</span>
            <el-date-picker
              v-model="filterForm.endDate"
              type="date"
              placeholder="结束日期"
              style="width: 140px;">
            </el-date-picker>
          </div>
          <div class="filter-item">
            <span class="filter-label">部门:</span>
            <el-select v-model="filterForm.department" placeholder="请选择" style="width: 150px;">
              <el-option
                v-for="item in filterOptions.departments"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <button class="btn btn-primary" @click="generateReport">生成报表</button>
          <div class="content-actions">
            <button class="btn btn-outline" @click="refreshData">
              <i class="el-icon-refresh"></i> 刷新
            </button>
            <button class="btn btn-primary" @click="exportReport">
              <i class="el-icon-download"></i> 导出报表
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="report-grid">
      <div class="report-card">
        <div class="report-title">
          <span>业务办理量趋势</span>
          <span class="report-date">{{ businessVolumeData.period }}</span>
        </div>
        <div class="report-chart">
          <i class="el-icon-data-line" style="font-size: 3rem;"></i>
          <span>业务办理量趋势图表</span>
        </div>
        <div class="report-stats">
          <div class="stat-item">
            <div class="stat-value">{{ businessVolumeData.summary.totalVolume }}</div>
            <div class="stat-label">总办理量</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ businessVolumeData.summary.dailyAverage }}</div>
            <div class="stat-label">日均办理量</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ businessVolumeData.summary.monthOverMonth }}</div>
            <div class="stat-label">环比增长</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ businessVolumeData.summary.topDepartment }}</div>
            <div class="stat-label">办理最多部门</div>
          </div>
        </div>
      </div>

      <div class="report-card">
        <div class="report-title">
          <span>窗口服务统计</span>
          <span class="report-date">{{ windowServiceData.period }}</span>
        </div>
        <div class="report-chart">
          <i class="el-icon-pie-chart" style="font-size: 3rem;"></i>
          <span>窗口服务统计图表</span>
        </div>
        <div class="report-stats">
          <div class="stat-item">
            <div class="stat-value">{{ windowServiceData.summary.avgWaitTime }}</div>
            <div class="stat-label">平均等待时间(分)</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ windowServiceData.summary.avgProcessTime }}</div>
            <div class="stat-label">平均办理时间(分)</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ windowServiceData.summary.busiestWindow }}</div>
            <div class="stat-label">最忙窗口</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ windowServiceData.summary.topStaff }}</div>
            <div class="stat-label">服务最多人员</div>
          </div>
        </div>
      </div>

      <div class="report-card">
        <div class="report-title">
          <span>用户满意度</span>
          <span class="report-date">{{ userSatisfactionData.period }}</span>
        </div>
        <div class="report-chart">
          <i class="el-icon-data-analysis" style="font-size: 3rem;"></i>
          <span>用户满意度趋势图表</span>
        </div>
        <div class="report-stats">
          <div class="stat-item">
            <div class="stat-value">{{ userSatisfactionData.summary.avgSatisfaction }}</div>
            <div class="stat-label">平均满意度</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ userSatisfactionData.summary.avgRating }}</div>
            <div class="stat-label">平均评分(5分制)</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ userSatisfactionData.summary.unsatisfiedCount }}</div>
            <div class="stat-label">不满意评价</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ userSatisfactionData.summary.topRatedStaff }}</div>
            <div class="stat-label">评分最高人员</div>
          </div>
        </div>
      </div>

      <div class="report-card">
        <div class="report-title">
          <span>热门业务TOP5</span>
          <span class="report-date">2023年8月</span>
        </div>
        <div class="table-container">
          <el-table :data="topBusinessData" style="width: 100%">
            <el-table-column prop="type" label="业务类型" width="120"></el-table-column>
            <el-table-column prop="count" label="办理量" width="80"></el-table-column>
            <el-table-column prop="percentage" label="占比" width="80"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    -->
  </div>
</template>

<script>
// 注释掉原来的复杂API导入
// import reportsApi from '@/api/reports'

export default {
  name: 'DataReports',
  data() {
    return {
      // 简化的数据，只保留必要的
      loading: false
      // 注释掉原来的复杂数据
      /*
      filterForm: {
        reportType: '1',
        timeRange: '3',
        department: '',
        startDate: '',
        endDate: ''
      },
      showCustomDateRange: false,
      // 筛选选项
      filterOptions: {
        reportTypes: [],
        timeRanges: [],
        departments: []
      },
      // 报表数据
      businessVolumeData: {
        period: '2023年8月',
        summary: {
          totalVolume: 328,
          dailyAverage: 42,
          monthOverMonth: '+12%',
          topDepartment: '教务处'
        }
      },
      windowServiceData: {
        period: '2023年8月',
        summary: {
          avgWaitTime: 15.2,
          avgProcessTime: 8.7,
          busiestWindow: '2号窗口',
          topStaff: '李四'
        }
      },
      userSatisfactionData: {
        period: '2023年8月',
        summary: {
          avgSatisfaction: '92%',
          avgRating: 4.6,
          unsatisfiedCount: 3,
          topRatedStaff: '王五'
        }
      },
      topBusinessData: [
        { type: '学籍证明', count: 128, percentage: '39%' },
        { type: '成绩单打印', count: 85, percentage: '26%' },
        { type: '学费缴纳', count: 52, percentage: '16%' },
        { type: '宿舍申请', count: 32, percentage: '10%' },
        { type: '校园卡补办', count: 21, percentage: '6%' }
      ]
      */
    }
  },
  created() {
    // 注释掉原来的数据加载方法
    // this.loadFilterOptions()
    // this.loadAllReports()
    console.log('欢迎页面已加载')
  },
  methods: {
    // 注释掉原来的复杂方法
    /*
    // 加载筛选选项
    async loadFilterOptions() {
      try {
        const response = await reportsApi.getFilterOptions()
        if (response.code === 200) {
          this.filterOptions = response.data
        }
      } catch (error) {
        console.error('加载筛选选项失败:', error)
      }
    },

    // 加载所有报表数据
    async loadAllReports() {
      this.loading = true
      try {
        const params = this.getFilterParams()
        const [businessRes, windowRes, satisfactionRes, topBusinessRes] = await Promise.all([
          reportsApi.getBusinessVolumeTrend(params),
          reportsApi.getWindowServiceStats(params),
          reportsApi.getUserSatisfaction(params),
          reportsApi.getTopBusinessServices(params)
        ])

        if (businessRes.code === 200) {
          this.businessVolumeData = businessRes.data
        }
        if (windowRes.code === 200) {
          this.windowServiceData = windowRes.data
        }
        if (satisfactionRes.code === 200) {
          this.userSatisfactionData = satisfactionRes.data
        }
        if (topBusinessRes.code === 200) {
          this.topBusinessData = topBusinessRes.data.data
        }
      } catch (error) {
        console.error('加载报表数据失败:', error)
        this.$message.error('加载数据失败')
      } finally {
        this.loading = false
      }
    },

    // 获取筛选参数
    getFilterParams() {
      const params = {
        reportType: this.filterForm.reportType,
        timeRange: this.filterForm.timeRange,
        department: this.filterForm.department
      }

      if (this.filterForm.timeRange === '6' && this.filterForm.startDate && this.filterForm.endDate) {
        params.startDate = this.filterForm.startDate
        params.endDate = this.filterForm.endDate
      }

      return params
    },

    handleTimeRangeChange(value) {
      this.showCustomDateRange = value === '6'
    },

    // 刷新数据
    async refreshData() {
      await this.loadAllReports()
      this.$message.success('数据已刷新')
    },

    // 导出报表
    async exportReport() {
      try {
        this.loading = true
        const params = this.getFilterParams()
        const response = await reportsApi.exportReport(params)

        if (response.code === 200) {
          // 创建下载链接
          const url = window.URL.createObjectURL(new Blob([response.data]))
          const link = document.createElement('a')
          link.href = url
          link.download = response.data.fileName || `数据报表_${new Date().toISOString().slice(0, 10)}.xlsx`
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
          window.URL.revokeObjectURL(url)

          this.$message.success('报表导出成功！')
        }
      } catch (error) {
        console.error('导出报表失败:', error)
        this.$message.error('导出失败')
      } finally {
        this.loading = false
      }
    },

    // 生成报表
    async generateReport() {
      await this.loadAllReports()

      const { reportType, timeRange, department, startDate, endDate } = this.filterForm
      let dateRange = ''

      if (timeRange === '6') {
        dateRange = `${startDate} 至 ${endDate}`
      } else {
        const options = {
          '1': '今日',
          '2': '本周',
          '3': '本月',
          '4': '本季度',
          '5': '本年'
        }
        dateRange = options[timeRange]
      }

      this.$message.success(`报表已生成: 类型=${reportType}, 时间范围=${dateRange}, 部门=${department || '全部'}`)
    }
    */
  }
}
</script>

<style scoped>
.data-reports-container {
  padding: 0;
}

/* 新的欢迎页面样式 */
.welcome-container {
  padding: 2rem;
  background-color: #f8fafc;
  min-height: 100vh;
}

.welcome-header {
  text-align: center;
  margin-bottom: 3rem;
}

.welcome-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1rem;
}

.welcome-subtitle {
  font-size: 1.2rem;
  color: #64748b;
  margin: 0;
}

.welcome-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.welcome-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card-icon {
  margin-bottom: 1.5rem;
}

.welcome-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1rem;
}

.welcome-card p {
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* 保留原有的样式以备将来使用 */
.content-header {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1E293B;
  margin: 0;
}

.content-actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: inline-flex;
  align-items: center;
}

.btn i {
  margin-right: 6px;
  font-size: 0.9rem;
}

.btn-primary {
  background-color: #1E40AF;
  color: white;
}

.btn-primary:hover {
  background-color: #1E40AFE0;
}

.btn-outline {
  background-color: transparent;
  border: 1px solid #E2E8F0;
  color: #1E293B;
}

.btn-outline:hover {
  border-color: #1E40AF;
  color: #1E40AF;
}

.card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1E293B;
}

.card-body {
  padding: 1.5rem;
}

.filter-container {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-label {
  font-size: 0.9rem;
  color: #64748B;
  white-space: nowrap;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1.5rem;
}

.report-card {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 1rem;
  background-color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.report-title {
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-date {
  font-size: 0.8rem;
  color: #64748B;
}

.report-chart {
  height: 300px;
  background-color: #F8FAFC;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #64748B;
  margin-bottom: 1rem;
}

.report-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.stat-item {
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 0.75rem;
  text-align: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #1E293B;
}

.stat-label {
  font-size: 0.8rem;
  color: #64748B;
}

.table-container {
  margin-top: 1rem;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .welcome-content {
    grid-template-columns: 1fr;
  }

  .welcome-container {
    padding: 1rem;
  }

  .welcome-title {
    font-size: 2rem;
  }

  .report-grid {
    grid-template-columns: 1fr;
  }

  .filter-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-item {
    width: 100%;
    justify-content: space-between;
  }
}
</style>
